<template>
  <a-modal :footer="false" v-model:visible="visible" title="导入关键词">
    <a-upload draggable :auto-upload="false" action="/" :file-list="fileList" @change="handleUpload" />
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { Message, Modal, type FormInstance } from '@arco-design/web-vue'
import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon'
import { importKeyword, uploadFile } from '@/apis'

const emits = defineEmits(['reFreshTable'])
const rules = {
  name: [{ required: true, message: '请输入用户昵称' }]
}

const visible = ref(false)
const detailId = ref('')
const formRef = ref<FormInstance>()

const show = () => {
  visible.value = true
}
const fileList = ref()

const handleUpload = (_, currentFile) => {
  // const fileUrl = import.meta.env.VITE_UPLOADED_FILE_BASE_URL

  // 请求上传接口
  // 上传成功后，将返回的图片地址赋值给form.headimage
  const formData = new FormData()
  formData.append('file', currentFile.file)
  uploadFile(formData).then((res) => {
    if (res.code === 1) {
      console.log(res)

      fileList.value = [
        {
          uid: 1,
          name: currentFile.file.name,
          url: res.data.url
        }
      ]
      const formData2 = new FormData()
      formData2.append('file', res.data.url)
      importKeyword(formData2).then((res) => {
        if (res.code === 1) {
          Message.success(res.msg)
          emits('reFreshTable')
          visible.value = false
        } else {
          Message.error(res.msg)
        }
      })
    } else {
      Message.error(res.msg)
    }
  })
}

defineExpose({ show })
</script>

<style lang="scss" scoped>
:deep(.arco-collapse-item-content) {
  background: none;
}
</style>
